//导入路由
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import { customHistory } from './utils/history'

//导入页面组件
import Layout from './pages/Layout'
import Login from './pages/Login'
import ProfileEdit from './pages/Profile/Edit'
import Search from './pages/Search'
import SearchResult from './pages/Search/Result'
import Article from './pages/Article'
import Chat from './pages/Profile/Chat'
import { KeepAlive } from './components/KeepAlive'
//导入鉴权路由组件
import { AuthRoute } from './components/AuthRoute'

// 为了让我们自己的样式能够覆盖 antd-mobile 组件库的样式
// 需要将 App.scss 的引入，放在导入组件后
import './App.scss'

function App() {
	return (
		<Router history={customHistory}>
			<div className='app'>
				{/* 注意：此处，需要将 KeepAlive 路由组件，放在 Switch 外部！ 因此该组件需要一直被渲染、展示 */}
				<KeepAlive path='/home'>
					<Layout />
				</KeepAlive>

				{/* Switch中的路由规则，只有第一个匹配才会显示 */}
				<Switch>
					<Route
						path='/'
						exact
						render={() => <Redirect to='/home' />}
					/>
					{/* 配置父级路由 */}
					{/* <Route path="/home" component={Layout} /> */}
					<Route path='/login' component={Login} />
					<Route path='/articles/:id' component={Article} />
					<Route exact path='/search' component={Search} />
					<Route path='/search/result' component={SearchResult} />

					{/* <Route path='/profile/Edit' component={ProfileEdit}></Route> */}
					{/* 通过children 指定渲染组件 */}
					<AuthRoute path='/profile/edit'>
						<ProfileEdit />
					</AuthRoute>
					{/* 小智 */}
					<AuthRoute path='/chat'>
						<Chat />
					</AuthRoute>
				</Switch>
			</div>
		</Router>
	)
}

export default App
